<template>
  <view>
    <uni-nav-bar title="邀请" :border="false" statusBar></uni-nav-bar>
    <view class="title">{{nameStore}}邀请你成为该店店员</view>
    <view class="phones">
      <view class="phones_tel">
        <text style="font-size: 30rpx">姓名</text>
        <input type="text" :placeholder="userinfo.realname ? userinfo.realname : '请输入姓名'" v-model="name"
          style="width: 80%" @input="fpNumInput" maxlength="3" :disabled="userinfo.realname ? true : false" />
      </view>
      <view class="phones_tel">
        <text style="font-size: 30rpx">手机号</text>
        <input type="number" :placeholder="userinfo.mobile ? userinfo.mobile : '请输入手机号'" maxlength="11" v-model="phone"
          style="width: 80%" :disabled="userinfo.mobile ? true : false" />
      </view>
      <view class="phones_tel" v-if="!userinfo.mobile">
        <text style="font-size: 30rpx">验证码</text>
        <view class="phones_code">
          <input v-model="code" style="width: 50%" placeholder="请输入验证码" type="number" maxlength="4" />
          <view class="_code" @click="handleCodeClick()">{{ textArea }}</view>
        </view>
      </view>
    </view>
    <view class="phone_bottom" @click="submit()">接受</view>
    <!-- 浮窗按钮 -->
    <drag-button :isDock="true" :existTabBar="true" @btnClick="JumpTab" @btnTouchstart="btnTouchstart"
      @btnTouchend="btnTouchend" />
  </view>
</template>

<script setup lang="ts">
  import dragButton from '@/components/drag-button/drag-button.vue';
  import { getDriverID } from '@/stores/driverID';
  import { useUserStore } from '@/stores/user';
  import { toPublish } from '@mqtt';
  import { nextTick, ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { decrypt } from '@/utils/jsencrypt';
  import { showToast, successToast, errorToast, showLoading } from '@/utils/prompt';
  const driver_id = getDriverID();
  const userinfo = useUserStore();
  const name = ref(''); //用户姓名
  const phone = ref('');
  const code = ref('');
  const textArea = ref('验证码');
  const btnBool = ref(true); //放重复点击

  const nameStore = ref('');
  const repeat = ref(true); //放重复点击
  const all = ref()
  onLoad(() => {
    const loct = uni.getStorageSync('StoreData')
    all.value = JSON.parse(decrypt(loct))
    nameStore.value=all.value.shop_name
  })
  /**
   * 正则输入的数据
   */
  function fpNumInput(e) {
    const { detail } = e;
    const inputRule = /[^\u4E00-\u9FA5]/g; ///只能输入中文
    const value = detail.value.replace(inputRule, '');
    nextTick(() => {
      name.value = value;
    });
  }
  /**
   * 正则手机号码
   */
  function phoneTel() {
    const mobile = /^1[3-9]\d{9}$/;
    const userPhone = phone.value ? phone.value : userinfo && userinfo.mobile;
    return mobile.test(userPhone);
  }
  /**
   * 发送验证码
   */
  function handleCodeClick() {
    if (!phone.value) {
      showToast('手机号不能为空');
      return;
    } else if (!phoneTel()) {
      showToast('请输入正确的手机号码');
      return;
    }
    if (btnBool.value) {
      btnBool.value = false;
      const payload = {
        event: 'notice',
        mobile: phone.value,
      };
      toPublish('driver/sendSms', payload, (obj : any) => {
        console.log(obj);
      });
      successToast('发送成功');
      let i = 60;
      let timer = setInterval(() => {
        textArea.value = +i + 's';
        i--;
        if (i < 0) {
          btnBool.value = true;
          textArea.value = '验证码';
          clearInterval(timer);
        }
      }, 1000);
    } else {
      return;
    }
  }
  // 提交绑定店员
  function submit() {
    const mobile = phone.value ? phone.value : userinfo.mobile;
    if (!mobile || !phoneTel()) {
      showToast('请输入正确的手机号码');
      return;
    } else if (phone.value && !code.value) {
      showToast('请输入验证码');
      return;
    }
    showLoading();
    if (!repeat.value) {
      return;
    }
    repeat.value = false;
    const payload = {
      shop_id: Number(all.value.shop_id),
      user_id: driver_id,
      name: name.value,
      mobile: phone.value,
      code: code.value,
    };
    toPublish('shop/confirmInvite', payload, (obj : any) => {
      uni.hideLoading();
      const { code, msg } = obj;
      if (code === 1) {
        successToast(msg);
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages/index/filling',
          });
        }, 1000);
      } else {
        repeat.value = true
        errorToast(msg);
      }
    });
  }
</script>

<style scoped lang="less">
  .phones {
    width: 96%;
    background-color: white;
    box-shadow: 0px 2px 23px 1px rgba(204, 204, 204, 0.3);
    margin: 15rpx auto;
    padding: 10rpx 30rpx;
    box-sizing: border-box;
    border-radius: 5px;

    .phones_tel {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 0px;
      box-sizing: border-box;

      text {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }

      input {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
      }

      .phones_code {
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        view {
          width: 130rpx;
          text-align: center;
          padding: 6px 0px;
          box-sizing: border-box;
          font-size: 28rpx;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          background: linear-gradient(-55deg, #1f7be3, #4ba0e2);
          border-radius: 5px;
          color: #fff;
        }
      }

      text {
        font-size: 26rpx;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #333333;
      }

      ._code {
        color: #ffffff;
        text-align: center;
      }
    }
  }

  .phone_bottom {
    width: 370rpx;
    height: 80rpx;
    background: linear-gradient(104deg, #41a3ff, #1b91ff);
    border-radius: 5px;
    text-align: center;
    line-height: 80rpx;
    font-size: 34rpx;
    font-family: PingFangSC;
    font-weight: 400;
    color: #ffffff;
    margin: 10vh auto 0px;
  }

  .title {
    font-size: 36rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2093fe;
    padding: 20rpx;
    box-sizing: border-box;
  }
</style>